//
// Button groups
// --------------------------------------------------


// Make the div behave like a button
.sui-btn-group {
  position: relative;
  display: inline-block;
  .ie7-inline-block();
  font-size: 0; // remove as part 1 of font-size inline-block hack
  vertical-align: middle; // match .btn alignment given font-size hack above
  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
  .ie7-restore-left-whitespace();

  + .sui-btn-group {
    margin-left: 5px;
  }
}

// Optional: Group multiple button groups together for a toolbar
.sui-btn-toolbar {
  font-size: 0; // Hack to remove whitespace that results from using inline-block
  margin-top: @baseLineHeight / 2;
  margin-bottom: @baseLineHeight / 2;
  > .btn + .btn,
  > .btn-group + .btn,
  > .btn + .btn-group {
    margin-left: 5px;
  }
}

// Float them, remove border radius, then re-add to first and last elements
.sui-btn-group {
  > .sui-btn {
    position: relative;
    .border-radius(0);

    > .caret {
      .sui-icon;
      line-height: @baseLineHeight - 1 ;
      &:before {
        content: "\e6be";
        float: right;
        margin-left: 8px;
      }
    }

    //现在用的字体在渲染时会把btn撑高一像素，暂时用lineheight来解决这个bug
    &.btn-small > .caret {
      line-height: @lineHeightSmall - 1;
    }
    &.btn-large > .caret {
      line-height: @lineHeightLarge - 1;
    }
    &.btn-xlarge > .caret {
      line-height: @lineHeightXLarge - 1;
    }
  }
  .sui-btn + .sui-btn {
    margin-left: -1px;
  }
  .sui-btn,
  .sui-dropdown-menu,
  .popover {
    font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
  }

  .sui-dropdown-menu {
    display: none;
    position: absolute;
    top: 105%;
    left: 0;
  }
  &.open .sui-dropdown-menu {
    display: block;
  }
  // Reset fonts for other sizes
  > .btn-mini {
    font-size: @fontSizeMini;
  }
  > .btn-small {
    font-size: @fontSizeSmall;
  }
  > .btn-large {
    font-size: @fontSizeLarge;
  }

  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
  > .sui-btn:first-child {
    margin-left: 0;
    .border-top-left-radius(@baseBorderRadius);
    .border-bottom-left-radius(@baseBorderRadius);
  }
  // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
  > .sui-btn:last-child,
  > .dropdown-toggle {
    .border-top-right-radius(@baseBorderRadius);
    .border-bottom-right-radius(@baseBorderRadius);
  }
  // Reset corners for large buttons
  > .sui-btn.large:first-child {
    margin-left: 0;
    .border-top-left-radius(@borderRadiusLarge);
    .border-bottom-left-radius(@borderRadiusLarge);
  }
  > .sui-btn.large:last-child,
  > .large.dropdown-toggle {
    .border-top-right-radius(@borderRadiusLarge);
    .border-bottom-right-radius(@borderRadiusLarge);
  }

  // On hover/focus/active, bring the proper btn to front
  > .sui-btn:hover,
  > .sui-btn:focus,
  > .sui-btn:active,
  > .sui-btn.active {
    z-index: 2;
  }

  // On active and open, don't show outline
  .dropdown-toggle:active,
  .open .dropdown-toggle {
    outline: 0;
  }



  // Split button dropdowns
  // ----------------------

  // Give the line between buttons some depth
  > .sui-btn + .dropdown-toggle {
    padding-left: 8px;
    padding-right: 8px;
    .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
    *padding-top: 5px;
    *padding-bottom: 5px;
  }
  > .sui-btn-mini + .dropdown-toggle {
    padding-left: 5px;
    padding-right: 5px;
    *padding-top: 2px;
    *padding-bottom: 2px;
  }
  > .sui-btn-small + .dropdown-toggle {
    *padding-top: 5px;
    *padding-bottom: 4px;
  }
  > .sui-btn-large + .dropdown-toggle {
    padding-left: 12px;
    padding-right: 12px;
    *padding-top: 7px;
    *padding-bottom: 7px;
  }

  &.open {

    // The clickable button for toggling the menu
    // Remove the gradient and set the same inset shadow as the :active state
    .dropdown-toggle {
      background-image: none;

      //下面的暂时无法用mixin来写
      .btn-active(@backgroundColor) {
        background-color: darken(@backgroundColor, 5%);
        border-color: darken(@backgroundColor, 10%);
      }
      &.btn-primary {
        .btn-active(@btnPrimaryBackground);
      }
      // Warning appears are orange
      &.btn-warning {
        .btn-active(@btnWarningBackground);
      }
      // Danger and error appear as red
      &.btn-danger {
        .btn-active(@btnDangerBackground);
      }
      // Success appears as green
      &.btn-success {
        .btn-active(@btnSuccessBackground);
      }
      // Info appears as a neutral blue
      &.btn-info {
        .btn-active(@btnInfoBackground);
      }
      // Inverse appears as dark gray
      &.btn-inverse {
        .btn-active(@btnInverseBackground);
      }
    }
  }

}

// Reposition the caret
.sui-btn .caret {
  margin-top: 8px;
  margin-left: 0;
}
// Carets in other button sizes
.btn-large .caret {
  margin-top: 6px;
}
.btn-large .caret {
  border-left-width:  5px;
  border-right-width: 5px;
  border-top-width:   5px;
}
.btn-mini .caret,
.btn-small .caret {
  margin-top: 8px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
  border-bottom-width: 5px;
}



// Account for other colors
.btn-primary,
.btn-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
  .caret {
    border-top-color: @white;
    border-bottom-color: @white;
  }
}



// Vertical button groups
// ----------------------

.btn-group-vertical {
  display: inline-block; // makes buttons only take up the width they need
  .ie7-inline-block();
}
.btn-group-vertical > .sui-btn {
  display: block;
  float: none;
  max-width: 100%;
  .border-radius(0);
}
.btn-group-vertical > .sui-btn + .sui-btn {
  margin-left: 0;
  margin-top: -1px;
}
.btn-group-vertical > .sui-btn:first-child {
  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
}
.btn-group-vertical > .sui-btn:last-child {
  .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
}
.btn-group-vertical > .btn-large:first-child {
  .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
}
.btn-group-vertical > .btn-large:last-child {
  .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
}
